<template>
  <div class="dice" :class="{ 'rolling': isRolling }" ref="diceRef">
    <div class="dice-box">
      <div v-for="(face, index) in faces" 
           :key="index" 
           :class="['face', face.position]">
        <div class="dots-container">
          <span v-for="(dot, dotIndex) in face.dots" 
                :key="dotIndex" 
                class="dot"
                :class="dot"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  value: {
    type: Number,
    default: 1
  }
})

const isRolling = ref(false)
const diceRef = ref(null)

// 定义骰子每个面的点数位置
const faces = computed(() => [
  {
    position: 'front',
    dots: getDotPositions(props.value || 1)
  },
  {
    position: 'back',
    dots: getDotPositions(6)
  },
  {
    position: 'right',
    dots: getDotPositions(3)
  },
  {
    position: 'left',
    dots: getDotPositions(4)
  },
  {
    position: 'top',
    dots: getDotPositions(2)
  },
  {
    position: 'bottom',
    dots: getDotPositions(5)
  }
])

// 根据点数返回对应的点位类名
function getDotPositions(num) {
  switch (num) {
    case 1:
      return ['center']
    case 2:
      return ['top-right', 'bottom-left']
    case 3:
      return ['top-right', 'center', 'bottom-left']
    case 4:
      return ['top-left', 'top-right', 'bottom-left', 'bottom-right']
    case 5:
      return ['top-left', 'top-right', 'center', 'bottom-left', 'bottom-right']
    case 6:
      return ['top-left', 'top-right', 'center-left', 'center-right', 'bottom-left', 'bottom-right']
    default:
      return []
  }
}

const roll = () => {
  isRolling.value = true
  setTimeout(() => {
    isRolling.value = false
  }, 1000)
}

defineExpose({ roll })
</script>

<style lang="scss" scoped>
.dice {
  width: 80px;
  height: 80px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
  cursor: pointer;
  
  &.rolling {
    animation: rolling 1s linear;
  }

  .dice-box {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
  }

  .face {
    position: absolute;
    width: 100%;
    height: 100%;
    background: white;
    border: 2px solid #e4e7ed;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);

    .dots-container {
      width: 80%;
      height: 80%;
      position: relative;
    }
  }

  .dot {
    width: 12px;
    height: 12px;
    background: #303133;
    border-radius: 50%;
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.3);
    position: absolute;

    // 中心点
    &.center {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    // 左上角
    &.top-left {
      top: 0;
      left: 0;
    }

    // 右上角
    &.top-right {
      top: 0;
      right: 0;
    }

    // 左中
    &.center-left {
      top: 50%;
      left: 0;
      transform: translateY(-50%);
    }

    // 右中
    &.center-right {
      top: 50%;
      right: 0;
      transform: translateY(-50%);
    }

    // 左下角
    &.bottom-left {
      bottom: 0;
      left: 0;
    }

    // 右下角
    &.bottom-right {
      bottom: 0;
      right: 0;
    }
  }

  .front  { transform: translateZ(40px); }
  .back   { transform: rotateY(180deg) translateZ(40px); }
  .right  { transform: rotateY(90deg) translateZ(40px); }
  .left   { transform: rotateY(-90deg) translateZ(40px); }
  .top    { transform: rotateX(90deg) translateZ(40px); }
  .bottom { transform: rotateX(-90deg) translateZ(40px); }
}

@keyframes rolling {
  0% { transform: rotateX(0) rotateY(0) rotateZ(0); }
  100% { transform: rotateX(720deg) rotateY(720deg) rotateZ(360deg); }
}
</style> 